<!DOCTYPE html>
<html>
  <style type="text/css">
  .parent {
    width: 100%;
    position: relative;
  }
  input{
    z-index: 1;
  }
  .placeholder {
    position: absolute;
    top: 0;
    left: 10px;
    color:rgb(59, 59, 59);
    z-index: 0;
  }
  </style>
<body>
  <div class="parent">
    <input class="input-box" type="text"  />
    <span class="placeholder">请输入</span>
  </div>
  <input type="text" placeholder="请输入"/>
</body>
<script>
  !(() => {
    const place = document.querySelector('.placeholder')
    place.addEventListener('click', () => {
      const input = document.querySelector('.input-box')
      input.focus()
    })
    const input = document.querySelector('.input-box')
    input.addEventListener('input', (e) => {
      const place = document.querySelector('.placeholder')
      if(e.target.value === ''){
        place.style.display = 'block'
      }else {
        place.style.display = 'none'
      }
    })
  })()
</script>
</html>